<script src="@/js/footer/footer.js"></script>

<template>

  <div id="app">

    <!-- 页脚 -->
    <div class="footer">

      <!-- 1、弹窗链接 -->
      <div class="link">
        <a @click="guanyu = true">关于本站</a>
        <el-divider direction="vertical" />
        <a @click="yinsi = true">隐私声明</a>
        <el-divider direction="vertical" />
        <a @click="mianze = true">免责声明</a>
        <el-divider direction="vertical" />
        <a @click="lianxi = true">联系本站</a>
      </div>

      <!-- 2、标识 -->
      <div class="mark">
        Copyright © 2024 网站名称.
        All Rights Reserved
        <!-- 备案号 -->
        <a class="bei" target="_blank" href="https://beian.miit.gov.cn">
          
        </a>
      </div>

    </div>

    <!-- 窗口 -->
    <div class="dialog">

      <!-- 1、关于本站 -->
      <el-dialog v-model="guanyu" class="guanyu" :lock-scroll="false"
        style="min-width: 500px; max-width: 800px; min-height: 210px;">
        <template #header>
          <span class="header">
            <Icon type="ios-aperture" />
            关于本站
          </span>
        </template>
        <p class="divider">
          <el-divider />
        </p>
        <div>
          <p>
            1、{{ siteName }}（以下简称“<b>本站</b>”）提供传统文化参考等功能。
          </p>
          <p>
            2、本站内容仅供研究、学习之用，不可对号入座、沉迷于此。
          </p>
          <p>
            3、本站部分文化内容来源于网络，如发现侵权，请
            <a @click="lianxi = true">
              联系本站
              <Icon type="ios-open-outline" />
            </a>
            删除。
          </p>
          <p class="project">
            4、请勿用于任何非法用途或其他不正当行为，否则后果自负！
          </p>
        </div>
      </el-dialog>

      <!-- 2、隐私声明 -->
      <el-dialog v-model="yinsi" class="yinsi" :lock-scroll="false"
        style="min-width: 500px; max-width: 800px; min-height: 210px;">
        <template #header>
          <span class="header">
            <Icon type="ios-aperture" />
            隐私声明
          </span>
        </template>
        <p class="divider">
          <el-divider />
        </p>
        <div>
          <p>{{ siteName }}（以下简称“<b>本站</b>”）深知个人信息对您的重要性，并会尽全力保护您的个人信息安全可靠。本站恪守以下原则：</p>
          <p><b>一、用户隐私</b></p>
          您在使用某些功能时，可能会收集姓名、性别、日期等信息，但本站不会以任何形式进行数据存储。
          <br /><br />
          <div>
            <Icon type="ios-alert-outline" />
            如果您对本隐私条款有任何疑问、意见或建议，请与
            <a @click="lianxi = true">
              本站联系
              <Icon type="ios-open-outline" />
            </a>
            。
          </div>
        </div>
      </el-dialog>

      <!-- 3、免责声明 -->
      <el-dialog v-model="mianze" class="mianze" :lock-scroll="false"
        style="min-width: 500px; max-width: 800px; min-height: 210px;">
        <template #header>
          <span class="header">
            <Icon type="ios-aperture" />
            免责声明
          </span>
        </template>
        <p class="divider">
          <el-divider />
        </p>
        <div>
          <p>
            1、{{ siteName }}（以下简称“<b>本站</b>”）将永久免费提供给公众使用（包含后续所有新增功能），但用户在使用过程中需自行承担风险和责任。
          </p>
          <br />
          <p>
            2、本站可能存在某些缺陷或错误，可能导致本站或系统崩溃以及其他不良后果，本站不承担任何直接或间接的损害赔偿责任。
          </p>
          <br />
          <p>
            3、本站可能存在与用户设备不兼容的情况，用户应注意本站是否适合其设备；如因本站导致用户设备损坏或数据丢失，本站不承担任何责任。
          </p>
          <br />
          <p>
            4、若使用本站功能做一切法律禁止的行为时，本站不承担任何法律责任。
          </p>
          <br />
          <p>
            5、此免责声明最终解释权归本站所有，如有任何争议或疑问，请与
            <a @click="lianxi = true">
              本站联系
              <Icon type="ios-open-outline" />
            </a>
            并寻求解决方案。
          </p>
        </div>
      </el-dialog>

      <!-- 4、联系本站 -->
      <el-dialog v-model="lianxi" class="lianxi" :lock-scroll="false"
        style="min-width: 500px; max-width: 800px; min-height: 210px;">
        <template #header>
          <span class="header">
            <Icon type="ios-aperture" />
            联系本站
          </span>
        </template>
        <p class="divider">
          <el-divider />
        </p>
        <div>
          <div class="qq">
            <a :href="qqLink">
              <!-- 请替换QQ二维码 -->
              <!-- <img src="@/assets/pic/footer/qqmp.png" class="img" /> -->
            </a>
            <br />
            <span class="title">QQ扫一扫</span>
          </div>
          <div class="wx">
            <!-- 请替换微信二维码 -->
            <!-- <img src="@/assets/pic/footer/wxmp.png" class="img" /> -->
            <br />
            <span class="title">微信扫一扫</span>
          </div>
        </div>
      </el-dialog>

    </div>

  </div>

</template>

<style scoped lang="less" src="@/css/footer/footer.scss"></style>
